import React, { useState } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  ScrollView,
  Platform,
  Alert,
  Image,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useRouter } from "expo-router";
import * as ImagePicker from "expo-image-picker";
import { theme } from "../../theme";
import Form from "../../components/Form";

export default function EventCollectScreen() {
  const router = useRouter();
  const [formData, setFormData] = useState({
    eventType: "",
    description: "",
    eventDate: "",
    location: "",
    status: "",
    reporter: "",
    contactPhone: "",
    urgencyLevel: "",
    notes: "",
  });

  const [images, setImages] = useState<string[]>([]);

  const formFields = [
    {
      name: "eventType",
      label: "事件类型",
      type: "select",
      options: [
        { label: "安全隐患", value: "安全隐患" },
        { label: "环境卫生", value: "环境卫生" },
        { label: "基础设施", value: "基础设施" },
        { label: "其他", value: "其他" },
      ],
      rules: [{ required: true, message: "请选择事件类型" }],
    },
    {
      name: "description",
      label: "事件描述",
      type: "textarea",
      placeholder: "请输入事件描述",
      rules: [{ required: true, message: "请输入事件描述" }],
    },
    {
      name: "eventDate",
      label: "发生时间",
      type: "datetime",
      placeholder: "请选择发生时间",
      rules: [{ required: true, message: "请选择发生时间" }],
    },
    {
      name: "location",
      label: "发生地点",
      type: Platform.OS === 'web' ? "text" : "location",
      placeholder: "请输入发生地点",
      rules: [{ required: true, message: Platform.OS === 'web' ? "请输入发生地点" : "请选择发生地点" }],
    },
    {
      name: "urgencyLevel",
      label: "紧急程度",
      type: "select",
      options: [
        { label: "一般", value: "一般" },
        { label: "紧急", value: "紧急" },
        { label: "特急", value: "特急" },
      ],
    },
    {
      name: "status",
      label: "处理状态",
      type: "select",
      options: [
        { label: "待处理", value: "待处理" },
        { label: "处理中", value: "处理中" },
        { label: "已处理", value: "已处理" },
      ],
    },
    {
      name: "reporter",
      label: "上报人",
      type: "text",
      placeholder: "请输入上报人姓名",
      rules: [{ required: true, message: "请输入上报人姓名" }],
    },
    {
      name: "contactPhone",
      label: "联系电话",
      type: "phone",
      placeholder: "请输入联系电话",
      rules: [{ required: true, message: "请输入联系电话" }],
    },
    {
      name: "notes",
      label: "备注信息",
      type: "textarea",
      placeholder: "请输入备注信息",
    },
    {
      name: "images",
      label: "现场照片",
      type: "image",
    },
  ];

  const handleSubmit = (values: Record<string, any>) => {
    // 在实际应用中，这里会提交数据到服务器
    console.log("提交数据:", values);
    // 提交成功后返回上一页
    router.back();
  };

  return (
    <ScrollView style={styles.container}>
      <View style={styles.header}>
        <TouchableOpacity
          style={styles.backButton}
          onPress={() => router.back()}
        >
          <Ionicons name="arrow-back" size={24} color="#fff" />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>事件信息采集</Text>
        <View style={styles.placeholder} />
      </View>
      <Form
        fields={formFields}
        initialValues={formData}
        onSubmit={handleSubmit}
        submitText="提交信息"
        images={images}
        onImagesChange={setImages}
      />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme.colors.background.default,
  },
  header: {
    backgroundColor: theme.colors.primary,
    paddingTop: Platform.OS === "ios" ? 50 : 20,
    paddingBottom: 15,
    paddingHorizontal: 15,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },
  backButton: {
    padding: 5,
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: "600",
    color: theme.colors.white,
  },
  placeholder: {
    width: 24,
  }
});
